<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_箭头函数</title>

</head>
<body>
    <button id="btn1">测试箭头函数this_1</button>
    <button id="btn2">测试箭头函数this_2</button>
<!--
* 作用: 定义匿名函数
* 基本语法:
  * 没有参数: () => console.log('xxxx')
  * 一个参数: i => i+2
  * 大于一个参数: (i,j) => i+j
  * 函数体不用大括号: 默认返回结果
  * 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
* 使用场景: 多用来定义回调函数

* 箭头函数的特点：
    1、简洁
    2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
    3、扩展理解： 箭头函数的this看外层的是否有函数，
        如果有，外层函数的this就是内部箭头函数的this，
        如果没有，则this是window。
-->
<script type="text/javascript">
    /*let  fun=function () {
    }*/

    // 形参的情况
    // 1、没有形参
    let fun = () => console.log('我是箭头函数');
    fun();
    //2、只有一个形参的时候 （）可以省略
    // let fun2= (a) =>  console.log(a);
    let fun2= a =>  console.log(a);
    fun2('aaa');
     //3、两个以上
    let fun3=(x,y)=>console.log(x,y);
    fun3(25,26);

    // 函数体的情况
    //1、函数体 只有一条语句或者表达式的时候 {}可以省略 自动加return 返回语句 或者 表达式的结果
    // let fun4 = () => console.log('我是箭头函数');
    let fun4=(x,y)=>x+y; //运算表达式
    // let fun4=()=>{return console.log('我是箭头函数');}
    // let fun4=(x,y)=>{ return x+y}; //运算表达式
    fun4();

    //2、函数体不止一条语句
    let fun5=(x,y)=>{
        console.log(x,y);
        return x+y;
    }
    console.log(fun5(1, 2));;

    //测试箭头函数的this
    let btn1=document.getElementById('btn1');
    let btn2=document.getElementById('btn2');
    btn1.onclick=function () {
        console.log(this) //btn1
    }
    /*btn2.onclick=()=> {
        console.log(this) //window
    }*/

    /*let obj={
        name:'箭头函数',
        getname:function () {
            btn2.onclick=()=> {
                console.log(this) //obj
            }
        }
    }*/
    obj.getname();
    let obj={
        name:'箭头函数',
        getname:()=> {
            btn2.onclick=()=> {
                console.log(this) //obj
            }
        }
    }
    // 相当于
    // obj.getname = () => {};
    obj.getname();
</script>

</body>
</html>